<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <el-button icon="el-icon-arrow-left" @click="back">
            {{ $t('common.back') }}
          </el-button>
        </span>
        <span style="padding-left: 20px">{{ title() }}</span>
      </div>
      <div class="text item">
        <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="模板分类" prop="pass">
            <el-cascader
              v-model="ruleForm.template_classification_id"
              :props="templateClassificationProps"
            />
          </el-form-item>
          <el-form-item :label="$t('common.name')" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item :label="$t('common.cover')" prop="avatar">

            <FileUpload type="image" :file="ruleForm.avatar" @selectFile="selectFile" />

          </el-form-item>
          <el-form-item :label="$t('common.status')" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="0">{{ $t('common.disable') }}</el-radio>
              <el-radio :label="1">{{ $t('common.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="user.standing==2" :label="$t('common.dataType')" prop="data_type">
            <el-radio-group v-model="ruleForm.data_type">
              <el-radio :label="1">{{ $t('site.websiteData') }}</el-radio>
              <el-radio :label="2">{{ $t('site.templateData') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="user.standing==2" :label="$t('common.isitSuccessStory')" prop="is_successful_case">
            <el-radio-group v-model="ruleForm.is_successful_case">
              <el-radio :label="0">{{ $t('common.no') }}</el-radio>
              <el-radio :label="1">{{ $t('common.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{ $t('common.submitNow') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { add, update, getInfo } from '@/api/site'
import FileUpload from '@/components/FileUpload'
import { getTemplateClassificationList } from '@/web-api/template-classification'
export default {
  name: 'SiteFrom',
  components: { FileUpload },
  props: ['id'],
  data() {
    return {
      ruleForm: {
        name: '',
        avatar: '',
        status: 1,
        data_type: 1,
        template_classification_id: [],
        is_successful_case: 0
      },
      rules: {
        name: [
          { required: true, message: this.$t('site.pleaseEnterAName'), trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: this.$t('site.pleaseSelectACoverPage'), trigger: 'blur' }
        ],
        status: [
          { required: true, message: this.$t('site.statusCannotBeEmpty'), trigger: 'blur' }
        ]
      },
      user: {},
      templateClassificationProps: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          setTimeout(async() => {
            const templateClassificationList = await getTemplateClassificationList({
              page: 1,
              per_page: 60
            })
            const nodes = []
            if (templateClassificationList.total) {
              templateClassificationList.data.forEach((value, index) => {
                nodes.push({
                  value: value.id,
                  label: value.name,
                  leaf: level === 0
                })
              })
            }

            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }, 500)
        }
      }
    }
  },
  computed: {
  },
  created() {
    this.getUser()
    this.onInfo()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    title() {
      return this.id ? this.$t('site.editWebsite') : this.$t('site.create')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = this.ruleForm
          data.template_classification_id = this.ruleForm.template_classification_id[0]
          if (this.id) {
            update(this.id, data).then(res => {
              this.notifyMessage(res)
            })
          } else {
            data.parent_id = this.parentId
            add(data).then(res => {
              this.notifyMessage(res)
            })
          }
        } else {
          return false
        }
      })
    },
    selectFile({ select }) {
      this.ruleForm.avatar = select.name_url
    },
    notifyMessage(res) {
      this.$notify({
        message: res.message,
        type: 'success',
        duration: 1 * 1000
      })
      this.back()
    },
    onInfo() {
      if (!this.id) {
        return
      }
      getInfo(this.id).then(res => {
        this.ruleForm = res.data
        this.ruleForm.template_classification_id = [res.data.template_classification_id]
      })
    },
    getUser() {
      this.$store.dispatch('user/getInfo').then(res => {
        this.user = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
